<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HOOC 我的职业课堂</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/cacheUtil.js"></script>
    <script src="js/httpUtil.js"></script>
    <link rel="shortcut icon" href="img/logo.ico"/>
    <link rel="bookmark" href="img/logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="css/index.css">
    <style>
        .carousel-inner img {
            width: 100%;
            height: 100%;
        }

        #fenye button {
            border-radius: 4px;
            background-color: #0dd554;
            border-color: black;
            font-size: larger;
            color: black;
        }

        #fenye button:active {
            background-color: indianred;
            color: whitesmoke;
        }

        #fenye {
            position: relative;
            left: 400px;
        }
    </style>
</head>
<body style="background-color: white">

<div class="container">
    <iframe src="head.html" frameborder="0" width="100%" height="72" scrolling="No"></iframe>
    <br><br><br>
    <div class="row" id="div_course_list">
    </div>
    <br><br>
    <br>
    <div class="container" id="fenye">
        <table>
            <tr>
                <td>
                    <button>首页</button>
                </td>
                <td>
                    <button>上一页</button>
                </td>
                <td>
                    <button>下一页</button>
                </td>
                <td>
                    <button>尾页</button>
                </td>
            </tr>
        </table>
    </div>
    <br><br>

    <iframe src="bottom.html" frameborder="0" width="100%" height="200" scrolling="No"></iframe>

</div>

<template id="template_course">
    <div class="col-xm-3 col-md-4" id="course_item" onclick="toDes(this)">
        <div class="thumbnail container" style="text-align: center">
            <p hidden id="course_id">{id}</p>
            <img src="{img}" alt="..." class="container">
            <div class="caption container">
                <h3 id="name">{name}</h3>
                <p class="des_limit">{des}</p>
            </div>
        </div>
    </div>
</template>

<script>
    //加载页面->显示商品列表
    $(function () {
        // loadUserInfo();
        loadGoodsList(1);
    });

    /*todo 加载浏览器用户信息*/
    function loadUserInfo() {
        let user = getLoginUser();
        $("#label_user_name").html(user.userName);
    }

    //ajax 请求后台获取商品列表数据
    function loadGoodsList(currPage) {
        console.log("loadGoodsList");
        //发起ajax请求
        let url = `/course/getCourseByName/${currPage}/6`;
        let search = window.location.search;
        let number = search.indexOf("=") + 1;
        let param = "courseName=" + search.substring(number);
        console.log("window.location.search is : " + search.substring(number));
        console.log("param is : " + param);
        /*   /course/getCourseByName/1/6?courseName="漫画"*/
        httpGet(url, param, function (resp) {
            console.log(resp);
            renderingGoodsList(resp.list);
            //此方法需要填充pageInfo对象
            renderingPages(resp);
        });
    }

    //渲染显示商品列表
    function renderingGoodsList(courseList) {
        let templateCourseHtml = $("#template_course").html();
        let courseListHtml = "";
        let tempCourseHtml;
        //遍历商品列表
        $.each(courseList, function (index, course) {
            //后台数据填充到模板中
            tempCourseHtml = templateCourseHtml.replace(/{name}/g, course.name)
                .replace(/{des}/g, course.des)
                .replace(/{img}/g, course.img)
                .replace(/{id}/g, course.id);
            courseListHtml += tempCourseHtml;
        });
        //拼接商品展示html
        //html 填充到页面当中
        $("#div_course_list").html(courseListHtml);
    }

    function renderingPages(pageInfo) {
//分页实现
        let page = "";
        console.log(pageInfo);
        if (!pageInfo.isFirstPage) {
            page += `<li onclick="loadGoodsList(1)"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">首页</span></a></li>`;
        }
        if (pageInfo.hasPreviousPage) {
            page += `<li onclick="loadGoodsList(${pageInfo.prePage})"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">上一页</span></a></li>`;
        }
        let startPage = 0;
        if (pageInfo.pages < 5) {
            startPage = 1;
        } else if (pageInfo.pageNum <= 2) {
            startPage = 1;
        } else if (pageInfo.pageNum > 2 && (pageInfo.pages - pageInfo.pageNum > 2)) {
            startPage = pageInfo.pageNum - 2;
        } else {
            startPage = pageInfo.pages - 5;
        }
        let endPage = 0;
        if (pageInfo.pages < 5) {
            endPage = pageInfo.pages;
        } else if (pageInfo.pageNum <= 2) {
            endPage = 5;
        } else if (pageInfo.pageNum > 2 && pageInfo.pages - pageInfo.pageNum > 2) {
            endPage = pageInfo.pageNum + 2;
        } else {
            endPage = pageInfo.pages;
        }
        for (let j = startPage; j <= endPage; j++) {
            if (j == pageInfo.pageNum) {
                page += `<li onclick="loadGoodsList(${j})" class="active"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">${j}</span></a></li>`;
                continue;
            }
            page += `<li onclick="loadGoodsList(${j})"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">${j}</span></a></li>`;
        }
        if (pageInfo.hasNextPage) {
            page += `<li onclick="loadGoodsList(${pageInfo.nextPage})"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">下一页</span></a></li>`;
        }
        if (!pageInfo.isLastPage) {
            page += `<li onclick="loadGoodsList(${pageInfo.pages})"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">尾页</span></a></li>`;
        }
        $("#page").html(page);
    }

    function watchClick() {
        console.log("已点击观看按钮");
    }

    // 获取当前点击的那个元素，通过选择器查找出course_id，然后发送ajax
    function toDes(data) {
        console.log("course_item clicked");
        let url = "/course/showDes";
        let course_id = data.querySelector("#course_id").innerHTML;
        console.log("course_id is : " + course_id);
        let param = "courseId=" + course_id;
        console.log("param is : " + param);
        httpGet(url, param, function (data) {
            saveCourse(data);
            location.href = "description.html";
        })
    }

</script>
</body>
</html>


